import { Spin, message } from "antd";
import "../css/login.css";

import { Form, Button, Input } from "antd";
import { login } from "../api/login";
import { useNavigate } from "react-router-dom";

import { setToken } from "../utils/auth";
import React from "react";


const Login = () => {
    const navigate = useNavigate();
    const [spinning, setSpinning] = React.useState(false);
  
    const finish = async (val) => {
      setSpinning(true);
      const res = await login(val);
      setSpinning(false);
      if (res.result === 0) {
        setToken(res.data.token);
        navigate("/");
      } else{
        message.error(res.message)
      }
  
    };
  
    return (
      <div className="login-warp"> 
      <div className="login-container">
        <div className="login">
          <div className="login-title">登·录</div>
          <div>
            <Form
              name="basic"
              labelCol={{
                span: 0,
              }}
              wrapperCol={{
                span: 24,
              }}
              style={{}}
              initialValues={{
                remember: true,
              }}
              autoComplete="off"
              onFinish={finish}
            >
              <Form.Item
                label=""
                name="account"
                rules={[
                  {
                    required: true,
                    message: "请输入手机号",
                  },
                ]}
              >
                <Input placeholder="手机号" />
              </Form.Item>
  
              <Form.Item
                label=""
                name="password"
                rules={[
                  {
                    required: true,
                    message: "请输入密码",
                  },
                ]}
              >
                <Input.Password placeholder="密码" />
              </Form.Item>
              <Form.Item
                wrapperCol={{
                  offset: 0,
                  span: 24,
                }}
              >
                <Button
                  style={{ width: "100%" }}
                  type="primary"
                  htmlType="submit"
                >
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
        <Spin spinning={spinning} fullscreen />
        </div>
      </div>
    );
  };
  
  export default Login;
  